<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <link rel="stylesheet" href="../css/zhang.css">
    <!-- 引入css代码（注意修改路径） -->
    <link rel="stylesheet" href="../font/iconfont.css">

    <!-- 使用百度地图api -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tfD85YZlgokKmLkD4PjZB4lZFxhr4VyK"></script>


    <!-- 引入echart.js -->
    <script src="../js/echarts4.js"></script>


</head>

<body>
    <!-- 地图 -->
    <div class="map">

        <!-- 地图容器 -->
        <div id="container"></div>

        <script>
            var map = new BMapGL.Map("container"); // 创建地图实例 
            var point = new BMapGL.Point(113.823024, 34.79473); // 创建点坐标 
            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.setHeading(64.5); //设置地图旋转角度
            map.setTilt(73); //设置地图的倾斜角度

            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);

            var marker = new BMapGL.Marker(point); // 创建标注   
            map.addOverlay(marker); // 将标注添加到地图中
            map.setMapStyleV2({
                styleId: '4460912dccb85a7bcfcdd055449b0407'
            });
        </script>

    </div>



    <div class="nav1">
        <div class="nav2"><i>排水管网GIS综合应用系统</i></div>
    </div>
    <div class="nav">
        <div class="navbar" id="shouye"><a href="0.html">首页</a>
            <div class="tri"></div>
        </div>
        <!-- 第一个 -->
        <div class="navbar">
            <a href="2.html">地图操作</a>
            <div class="tri"></div>
        </div>
        <!-- 第二个 -->
        <div class="navbar"><a href="3.html">管网查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第三个 -->
        <div class="navbar"><a href="4.html">管网统计</a>
            <div class="tri"></div>
        </div>
        <!-- 第四个 -->
        <div class="navbar"><a href="5.html">巡检查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第五个 -->
        <div class="navbar navbar1"><a href="6.html">抢修养护</a>
            <div class="tri"></div>
        </div>
        <!-- 第六个 -->
        <div class="navbar"><a href="7.html">图档管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第七个 -->
        <div class="navbar"><a href="8.html">企业管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第八个 -->
        <div class="navbar"><a href="9.html">窨井管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第九个 -->
        <div class="navbar"><a href="10.html">泵站管理</a>
            <div class="tri"></div>
        </div>

        <div class="tubiao">
            <span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing" id="shezhi"></span>
            <span class="iconfont icon-yonghu" id="yonghu">&nbsp;admin</span>
            <span class="iconfont icon-exit-full" id="exit"></span>
        </div>
        <!-- 第十个 -->
    </div>
    <!-- 指南针 -->
    <div class="compass"></div>
    <div class="compass1"></div>
    <div class="tubiaobottom">
        <span class="iconfont icon-sousuo" id="sousuo"></span>
        <span class="iconfont icon-jia" id="jia"></span>
        <span class="iconfont icon-jianhao" id="jiahao"></span>
        <span><img src="../img/images/10010.png" alt=""></span>
        <span class="iconfont icon-fangzi1" id="fangzi"></span>
        <span class="iconfont icon-full-screen" id="jiantou"></span>
    </div>


    <!-- 下面的代码是图层选择 -->
    <div class="big">
        <div>
            <h4 class="topone"><img src="../img/images/图标.png" width="28" class="h4">&nbsp;图层选择</h4>
        </div>
        <div class="bop">
            <div class="one"><input type="checkbox" name="select">
                <div class="diyi1"></div>
                雨污合流管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked>
                <div class="diyi2"></div>
                污水管道
            </div>
            <div class="three"><input type="checkbox" name="select" checked>
                <div class="diyi3"></div>
                雨水管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10016.png" width="25">&nbsp;排污检修井
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10017.png" width="25">&nbsp;排洪检修井
            </div>
            <div class="two"><input type="checkbox" name="select"><img src="../img/images/10018.png" width="25">&nbsp;检修井
            </div>
            <div class="four"><input type="checkbox" name="select"><img src="../img/images/10019.png" width="25">&nbsp;雨篦
            </div>
            <div class="one"><input type="checkbox" name="select" checked>
                <div class="circle1"></div>&nbsp;污水泵站
            </div>
            <div class="five"><input type="checkbox" name="select" checked>
                <div class="circle2"></div>&nbsp;污水处理厂
            </div>
            <div class="six"><input type="checkbox" name="select" checked><img src="../img/images/10020.png" width="25">&nbsp;企业
            </div>
        </div>

    </div>





    <!-- //下面的代码是管线长度统计        -->
    <div class="top">
        <div>
            <h5 class="top1"><img src="../img/images/图标.png" width="28" class="img21">&nbsp;
                <div class="h5">管线长度占比统计
                </div>
            </h5>
        </div>
        <div class="top2">
            <div id="pie1" style="width: 200px;height: 300px;bottom: 32px;"></div>
            <div id="pie2" style="width: 200px;height: 300px;bottom: 330px; left:200px"></div>

            <script>
                //粘贴代码,这是第一个饼状图
                (function() {
                    var chartDom = document.getElementById('pie1');
                    var myChart = echarts.init(chartDom);
                    var option;


                    option = {
                        title: {
                            text: '按口径统计',
                            left: 'center',
                            padding: 50,
                            textStyle: {
                                color: '#fff',
                                fontWeight: '400',
                                fontSize: '15px'
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            bottom: '0',
                            top: '255px',
                            left: 'center',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [{
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '60%'],
                            bottom: '30px',
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: 60,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [{
                                value: 800,
                                name: '500'
                            }, {
                                value: 600,
                                name: '400'
                            }, {
                                value: 600,
                                name: '300'
                            }, {
                                value: 600,
                                name: '600'
                            }, {
                                value: 500,
                                name: '800'
                            }, {
                                value: 500,
                                name: '其他'
                            }]
                        }]
                    };

                    option && myChart.setOption(option);


                }());
                //粘贴代码，这是第二个饼状图
                (function() {
                    var chartDom = document.getElementById('pie2');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        title: {
                            text: '按材质统计',
                            left: 'center',
                            padding: 47,
                            // top:'42px',
                            textStyle: {
                                color: 'white',
                                fontWeight: '400',
                                fontSize: '15px'
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            bottom: '7%',
                            left: 'center',
                            top: '230px',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [{
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '60%'],
                            bottom: '35px',
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: 60,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [{
                                value: 3000,
                                name: 'HDPE'
                            }, {
                                value: 450,
                                name: 'PE'
                            }, {
                                value: 280,
                                name: 'PVC'
                            }, {
                                value: 4,
                                name: '砖'
                            }, {
                                value: 5500,
                                name: '砼'
                            }, {
                                value: 5,
                                name: '钢'
                            }, {
                                value: 1,
                                name: '铸铁'
                            }]
                        }]
                    };

                    option && myChart.setOption(option);


                }())
            </script>

        </div>
    </div>

    <!-- 下面是折线图的代码 -->
    <div class="big2">
        <div>
            <h5 class="top11"><img src="../img/images/图标.png" width="28" class="img1">
                <div class="tongji">&nbsp;巡检任务数量占比统计</div>
            </h5>
        </div>
        <div class="top22">
            <div class="shuzi1"><b>6&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&emsp;&nbsp;&nbsp;0</b></div>
            <img src="../img/images/10023.png" alt="蓝图" class="img2">
            <img src="../img/images/10024.png" alt="绿图" class="img3">
            <p class="zi1">总任务&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;已完成</p>

            <br />
            <div class="shuzi2"><b>6&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&emsp;&nbsp;&nbsp;&nbsp;0</b></div>
            <div class="houlia"><img src="../img/images/10025.png" alt="橘图" class="img4">
                <img src="../img/images/10026.png" alt="红图" class="img4">
            </div>
            <p class="zi2">未完成&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;报警中</p>
            <!-- 2.为折线图准备一块空间 -->
            <div id="line" style="width: 380px;height: 300px;bottom: 10px; left:300px">
                <div class="danwei">单位</div>

            </div>

            <script>
                (function() {
                    var chartDom = document.getElementById('line');
                    var myChart = echarts.init(chartDom);
                    var option;


                    option = {

                        title: {
                            text: '近12月巡检任务统计                                        单位: 个',


                            padding: 10,

                            textStyle: {
                                color: '#fff',
                                fontWeight: '400',
                                fontSize: '15px',
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['总任务', '已完成'],
                            color: 'white',
                            top: '30',
                            right: '110',
                            textStyle: {
                                color: 'white',
                            }
                        },
                        // toolbox: {
                        //     feature: {
                        //         saveAsImage: {}
                        //     }
                        // },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
                        }],
                        lineStyle: {

                            color: '#00fff0'


                        },
                        yAxis: [{
                            type: 'value',
                            //显示Y轴刻度
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'grey'
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'grey',
                                }
                            }
                        }],
                        axisLabel: {
                            color: 'white',

                        },
                        series: [{
                            name: '总任务',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: '#010C17'
                                    }, {
                                        offset: 1,
                                        color: '#44E2F0'
                                    }]),
                                }

                            },

                            emphasis: {
                                focus: 'series'
                            }
                            // data: [, 132, 101, 134, 90, 230, 210]
                        }, {
                            name: '已完成',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: '#010C17'
                                    }, {
                                        offset: 1,
                                        color: '#44E2F0'
                                    }]),


                                }
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 5, 0]
                        }]
                    };

                    option && myChart.setOption(option);


                })();
            </script>
        </div>
    </div>

    <!-- 下面是管线资产统计的代码 -->

    <div class="big3">
        <div>
            <h5 class="top111"><img src="../img/images/图标.png" width="28" class="img6">
                <div class="guan">&nbsp;管线资产统计</div>
            </h5>
        </div>
        <div class="top222">

            <img src="../img/images/10021.png" alt="z字形图" class="z">
            <div class="total">
                <div class="one11">总计</div> <br />
                <div class="two2">管线长度(KM)</div>
                <div class="three3"><b>259.888</b></div>



                <div class="xiabian">
                    <div class="zygx">
                        <div class="zygx1"></div>
                        <div class="zygx2"></div>
                        <div class="zygx-zi">主要管线(KM)</div>
                        <br />
                        <h2 class="zygx-shuzi">206.27</h2>
                    </div>
                    <div class="cygx">
                        <div class="cygx1"></div>
                        <div class="cygx2"></div>
                        <div class="cygx-zi">次要管线(KM)</div>
                        <br />
                        <h2 class="cygx-shuzi">53.618</h2>
                    </div>
                    <br />
                    <div class="ysgx">
                        <div class="ysgx1"></div>
                        <div class="ysgx2"></div>

                        <div class="ysgx-zi">雨水管线(KM)</div>
                        <br />
                        <h2 class="ysgx-shuzi">121.921</h2>
                    </div>
                    <div class="wsgx">
                        <div class="wsgx1"></div>
                        <div class="wsgx2"></div>

                        <div class="wsgx-zi">污水管线(KM)</div>
                        <br />
                        <h2 class="wsgx-shuzi">125.902</h2>
                    </div>
                    <div class="ywhlgx">
                        <div class="ywhlgx1"></div>
                        <div class="ywhlgx2"></div>

                        <div class="ywhlgx-zi">雨污合流管线(KM)</div>
                        <br />
                        <h2 class="ywhlgx-shuzi">12.065</h2>
                    </div>





                </div>



            </div>
        </div>

    </div>

    <!-- 下面是设备资产统计的代码 -->

    <div class="zichan">
        <div>
            <h5 class="sbzctop1"><img src="../img/images/图标.png" width="28" class="imgshebei">
                <div class="sbzctj">&nbsp;设备资产统计</div>
            </h5>
        </div>
        <div class="sbzctop2">
            <img src="../img/images/10022.png" alt="o字形图" class="o">
            <div class="total1">
                <div class="oneyubi">总计</div> <br />
                <div class="twoyubi">设备数</div>
                <div class="threeyubi"><b>13357</b></div>



                <div class="xiabian1">
                    <div class="yubi">
                        <img src="../img/images/10027.png" alt="雨篦" class="yubiimg" width="50">
                        <div class="yubi1"></div>
                        <div class="yubi2"></div>
                        <div class="yubi-zi">雨篦(个)</div>
                        <br />
                        <h2 class="yubi-shuzi">5 4 3 1</h2>
                    </div>

                    <div class="wsbz">
                        <img src="../img/images/10028.png" alt="污水泵站" class="wsbzimg" width="50">
                        <div class="wsbz1"></div>
                        <div class="wsbz2"></div>
                        <div class="wsbz-zi">污水泵站(个)</div>
                        <br />
                        <h2 class="wsbz-shuzi">1 2</h2>
                    </div>

                    <div class="yspk">
                        <img src="../img/images/10029.png" alt="雨水排口" class="yspkimg" width="50">
                        <div class="yspk1"></div>
                        <div class="yspk2"></div>
                        <div class="yspk-zi">雨水排口(个)</div>
                        <br />
                        <h2 class="yspk-shuzi">0</h2>
                    </div>

                    <div class="wsclc">
                        <img src="../img/images/10030.png" alt="污水处理厂" class="wsclcimg" width="50">
                        <div class="wsclc1"></div>
                        <div class="wsclc2"></div>
                        <div class="wsclc-zi">污水处理厂(个)</div>
                        <br />
                        <h2 class="wsclc-shuzi">3</h2>
                    </div>






                </div>



            </div>
        </div>




    </div>
    </div>

    <!-- 下边是污水处理的代码 -->

    <div class="wscldm">
        <div class="wushui">
            <h5 class="top3"><img src="../img/images/图标.png" width="28" class="imgwscl">
                <div class="chang">&nbsp;污水处理一厂&emsp;污水处理二厂</div>
            </h5>
        </div>
        <div class="top4">
            <div class="fangkuang">
                <span class="jsl">进水量:&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;出水量:</span>
                <span class="day">2010吨/天&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;1972吨/天</span> <br />
                <div class="in">进水水质</div>
                <span class="BOD">BOD5:&emsp;&emsp;&emsp;NH3-N:&emsp;&emsp;&emsp;COD:&emsp;&emsp; &emsp;SS:&emsp;&emsp;
                    &emsp;TP:&emsp;&emsp;&emsp; TN: </span>
                <span class="sz">0&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;23.3&emsp;&emsp;&emsp;&nbsp;132&emsp;&emsp;
                    &emsp;134&emsp;&emsp; &nbsp;3.15&emsp;&emsp;&emsp;25.8</span>
                <div class="out">出水水质</div>
                <span class="BOD1">BOD5:&emsp;&emsp;&emsp;NH3-N:&emsp;&emsp;&emsp;COD:&emsp;&emsp; &emsp;SS:&emsp;&emsp;
                    &emsp;TP:&emsp;&emsp;&emsp; TN: </span>
                <span class="sz1">0&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;23.3&emsp;&emsp;&emsp;&nbsp;132&emsp;&emsp;
                    &emsp;134&emsp;&emsp; &nbsp;3.15&emsp;&emsp;&emsp;25.8</span>
            </div>

        </div>
    </div>
    <!-- 为柱状图准备一块空间 -->
    <div class="zzt">
        <div id="column" style="width: 430px;height: 260px;bottom: 330px; left:200px"></div>

        <!-- 柱状图代码 -->

        <script>
            (function() {
                var chartDom = document.getElementById('column');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '污水日处理量统计                                           单位:吨',
                        textStyle: {
                            color: 'white',
                            fontWeight: 400,
                            fontSize: '16px'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1', '2', '3', '4', '5', '6', '7']
                    },
                    yAxis: {
                        type: 'value',
                        //取消网格线
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#1d3865'
                            }
                        }
                    },

                    textStyle: {
                        color: 'white',

                    },

                    series: [{
                        data: [467, 302, 279, 186, 86, 279, 186],
                        type: 'bar',
                        //设置柱子颜色
                        //showBackground:true,
                        //backgroundStyle:{
                        //color:"yello"
                        // },
                        //设置柱子上方文字
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'orange'
                                }, {
                                    offset: 1,
                                    color: 'rgba(212,131,0,0)'
                                }]),
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: 'springgreen'
                                    }
                                }
                            }
                        }
                    }]
                };

                option && myChart.setOption(option);


            }());
        </script>



    </div>









</body>

</html>